<template>
    <div class="ref">
        <h1>This is an ref page</h1>
        <img alt="Vue logo" src="../assets/logo.png" ref="image">
        <p>{{msg}}</p>
        <HelloWorld msg="Welcome to Your Vue.js App" ref="hello" />
        <button @click="showDOM()" ref="btn">显示dom</button>
    </div>
</template>

<script>
    import HelloWorld from '@/components/HelloWorld.vue'
    export default {
        name: 'Ref',
        components: {
            HelloWorld
        },
        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },
        created(){
            console.log('我是router 页面传递过来的参数',this.$route.params.id)
            console.log('我是router 页面传递过来的参数',this.$route.params.title)

        },
        methods: {
            showDOM(){
                console.log('真实DOM元素',this.$refs.image) //真实DOM元素
                console.log(this.$refs.btn) //真实DOM元素
                console.log(this.$refs.hello) //HelloWorld组件的实例对象（vc）
            }
        }
    }
</script>
